<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="emp">
        <!-- 表单模态框区域 -->
        <el-button type="text" @click="dialogFormVisible = true">添加员工</el-button>
        <el-dialog title="员工" :visible.sync="dialogFormVisible" @close="closeDialog">
            <el-form :model="employee">
                <el-form-item label="员工姓名">
                    <el-input v-model="employee.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工年龄">
                    <el-input v-model="employee.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工性别">
                    <el-input v-model="employee.gender" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工职位">
                    <el-input v-model="employee.position" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工部门">
<!--                    <el-input v-model="employee.deptId" autocomplete="off"></el-input>-->
                    <el-select v-model="employee.deptId" placeholder="请选择">
                        <el-option
                                v-for="dept in departments"
                                :key="dept.id"
                                :label="dept.name"
                                :value="dept.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveEmployee">确 定</el-button>
            </div>
        </el-dialog>
        <!--数据表格区域-->
        <el-table
                :data="employees"
                style="width: 100%">
            <el-table-column
                    label="编号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="姓名">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="年龄">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.age }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="性别">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.gender }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="职位">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.position }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="部门">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.department.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <template>
                        <el-popconfirm
                                title="这是一段内容确定删除吗？">
                            <el-button
                                    slot="reference"
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </el-popconfirm>
                    </template>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <script>
        new Vue({
           el:"#emp",
           data:{
               employees:[],    //员工列表
               departments:[],  //部门列表
               dialogFormVisible:false, //控制弹出框的显示
               employee:{
                   id:0,name:"",age:0,position:"",gender:"",deptId:0
               }      //当前需要保存的员工
           },
            methods:{
               loadEmployees:function () {
                    axios.get("/employees")
                        .then(res=>{
                           this.employees = res.data;
                        });
               },
                //加载部门
                loadDepartments(){
                   axios.get("/departments")
                        .then(res=>{
                            this.departments = res.data;
                        });
                },
                //显示更新的员工
                handleEdit(index, row) {
                    this.employee = JSON.parse(JSON.stringify(row));
                    this.dialogFormVisible = true;
                },
                //删除员工
                handleDelete(index, row) {
                    axios.delete("/employee/"+row.id)
                        .then(res =>{
                            if(res.data == "ok"){
                                this.loadEmployees();
                            }
                        });
                },
                //关闭对话框的回调
                closeDialog(){
                  this.employee =  {id:0,name:"",age:0,position:"",gender:"",deptId:0}
                },
                //保存员工
                saveEmployee(){
                    let emp = JSON.parse(JSON.stringify(this.employee));
                    //通过id判断是否是添加或更新操作
                    if(emp.id == 0){
                        //发送数据给后台添加
                        axios.post("/employee",emp)
                            .then(res => {
                                //成功后关闭对话框和添加数据
                                if(res.data == "ok"){
                                    this.dialogFormVisible = false;
                                    this.loadEmployees();
                                }
                            });
                    }else{
                        //发送数据给后台更新
                        axios.put("/employee",emp)
                            .then(res => {
                                //成功后关闭对话框和添加数据
                                if(res.data == "ok"){
                                    this.dialogFormVisible = false;
                                    this.loadEmployees();
                                }
                            });
                    }

                }
            },
            mounted(){
               this.loadEmployees();
               this.loadDepartments();
            }
        });
    </script>
</body>
</html>